<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>商城-我的订单</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 为开发方便为,所使用的JS和CSS文件本地引用，在生产环境中请考虑使用CDN加速服务 -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
  <!-- 以下为IE8的兼容性脚本，如果从文件夹中直接打开页面无效，需要部署到服务器端访问才能生效 -->
  <!--[if lt IE 9]>
  <script src="${pageContext.request.contextPath}/js/html5shiv.js"></script>
  <script src="${pageContext.request.contextPath}/js/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <!-- 这里插入LOGO图标 -->
          <!-- <img alt="LOGO" src="images/logo.png"/>-->LOL网上商城
        </a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
              <li class="dropdown" id="car">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">我的购物车<span style="color: #ffff00">${sessionScope.carSize }<c:if test="${empty sessionScope.carSize }">0</c:if></span>件</a>
                  <ul class="dropdown-menu" role="menu">
                  	<c:forEach items="${sessionScope.car }" var="carBean">
                      <li><a href="${pageContext.request.contextPath}/customer/showProductDetail.action?commodityId=${carBean.value.commodity.id}">${carBean.value.commodity.commodityName }<span class="badge">${carBean.value.count }</span></a></li>
                    </c:forEach>
                      <li class="divider"></li>
                      <li><a href="#">共<span style="color: red">${sessionScope.totalPrice }<c:if test="${empty sessionScope.totalPrice }">0</c:if></span>元</a><a href="${pageContext.request.contextPath}/customer/showCar.action" class="btn btn-default">结算</a></li>
                  </ul>
              </li>
          </ul>
          <form class="navbar-form navbar-right" role="search" action="${pageContext.request.contextPath}/customer/showProduct.action">
              <div class="form-group">
                  <input type="text" class="form-control" name="commName" placeholder="输入商品进行查询">
              </div>
              <button type="submit" class="btn btn-default">搜索</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
              <li>
                  <a href="${pageContext.request.contextPath}/customer/index.action">首页</a>
              </li>
              <li>
                  <a href="${pageContext.request.contextPath}/customer/showProduct.action">商品列表</a>
              </li>
              <c:if test="${sessionScope.user==null }">
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_loginUI.action">登录</a>
	              </li>
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_registerUI.action">注册</a>
	              </li>
              </c:if>
              <c:if test="${sessionScope.user!=null }">
              	  <li>
	                  	<a href="">欢迎，${sessionScope.user.userAccount }</a>
	              </li>
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_logout.action" onclick="return confirm('确定要注销吗？')">注销</a>
	              </li>
	              <li class="dropdown active">
	                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">个人中心</a>
	                  <ul class="dropdown-menu" role="menu">
	                      <li><a href="${pageContext.request.contextPath}/customer/showDataSet.action">资料设置</a></li>
	                      <li><a href="${pageContext.request.contextPath}/customer/showAccount.action">账户</a></li>
	                      <li><a href="${pageContext.request.contextPath}/customer/showOrder.action">我的订单</a></li>
	                  </ul>
	              </li>
              </c:if>
          </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <img src="${pageContext.request.contextPath}/img/dai.png">
      </div>
    </div>
    <br>
    <div class="row">
        <div class="col-xs-3">
            <div class="invite-block">
                <ul class="nav nav-pills nav-stacked" role="tablist">
                    <li role="presentation"><a href="${pageContext.request.contextPath}/customer/showDataSet.action">资料设置</a></li>
                    <li role="presentation"><a href="${pageContext.request.contextPath}/customer/showAccount.action">账户</a></li>
                    <li role="presentation"><a href="${pageContext.request.contextPath}/customer/showOrder.action">我的订单</a></li>
                    <li role="presentation"><a href="${pageContext.request.contextPath}/customer/showContact.action">常用联系人</a></li>
                    <li role="presentation"><a href="${pageContext.request.contextPath}/customer/showComplain.action">投诉</a></li>
                </ul>
            </div>
        </div>
      <div class="col-xs-9">
          <div class="invite-block">
              <div class="row">
                  <div class="col-xs-12 page-header">
                      <div class="col-xs-12">
                          <h4>
                              我的订单
                          </h4>
                      </div>
                      <div class="col-xs-12">
                          <form role="form" class="form-inline" action="${pageContext.request.contextPath}/customer/showOrder.action">
                              <div class="form-group">
                                  <select class="form-control" name="orderStatus">
                                      <option value="0">待支付</option>
                                      <option value="1">待发货</option>
                                      <option value="2">待收货</option>
                                      <option value="3">已完成</option>
                                      <option value="4">已评价</option>
                                      <option value="5">已取消</option>
                                      <option value="6">已退货</option>
                                  </select>
                              </div>
                              <button type="submit" class="btn btn-default">确定</button>
                          </form>
                      </div>
                  </div>
                  <div class="col-xs-12">
                      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                      	<c:forEach items="${orderFormPageBean.recordList }" var="order" varStatus="status">
                          <div class="panel panel-default">
                              <div class="panel-heading" role="tab" id="heading${status.count }">
                                  <h4 class="panel-title">
                                      <a data-toggle="collapse" data-parent="#accordion" href="#collapse${status.count }" aria-expanded="true" aria-controls="collapse${status.count }">
                                          订单号：${order.orderFormNo }/总价：￥${order.orderFormTotalPrice }/下单时间：${order.insertTime }/订单状态：
                                          <c:if test="${order.orderFormStatus==0 }">待支付</c:if>
                                          <c:if test="${order.orderFormStatus==1 }">待发货</c:if>
                                          <c:if test="${order.orderFormStatus==2 }">待收货</c:if>
                                          <c:if test="${order.orderFormStatus==3 }">已完成</c:if>
                                          <c:if test="${order.orderFormStatus==4 }">已评价</c:if>
                                          <c:if test="${order.orderFormStatus==5 }">已取消</c:if>
                                          <c:if test="${order.orderFormStatus==6 }">已退货</c:if>
                                      </a>
                                  </h4>
                              </div>
                              <div id="collapse${status.count }" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading${status.count }">
                                  <div class="panel-body">
                                      <h5>收货人：${order.contactName }/收货人联系电话：${order.mobile }/收货地址：${order.address }</h5>
                                      <table class="table table-hover">
                                      	<thead>
                                      		<tr>
                                      			<th>商品</th>
                                      			<th>价格</th>
                                      			<th>数量</th>
                                      		</tr>
                                      	</thead>
                                      	<tbody>
                                      		<c:forEach items="${order.orderList }" var="commodity">
                                      			<tr>
                                      				<td><a href="${pageContext.request.contextPath}/customer/showProductDetail.action?commodityId=${commodity.commodity.id}">${commodity.commodity.commodityName }</a></td>
                                      				<td>${commodity.commodity.commodityPrice }</td>
                                      				<td>${commodity.orderListAmount }</td>
                                      			</tr>
                                      		</c:forEach>
                                      	</tbody>
                                      </table>
                                      <h5>操作：
                                      	  <c:if test="${order.orderFormStatus==0 }"><a href="">支付</a>&nbsp;<a href="${pageContext.request.contextPath}/customer/cancelOrder.action?orderId=${order.id}" onclick="return confirm('确定要取消订单吗？')">取消订单</a></c:if>
                                          <c:if test="${order.orderFormStatus==1 }"><a href="${pageContext.request.contextPath}/customer/cancelOrder.action?orderId=${order.id}" onclick="return confirm('确定要取消订单吗？')">取消订单</a></c:if>
                                          <c:if test="${order.orderFormStatus==2 }"><a href="${pageContext.request.contextPath}/customer/confirmOrder.action?orderId=${order.id}" onclick="return confirm('确定已经收到货了吗？')">确认收货</a>&nbsp;<a href="${pageContext.request.contextPath}/customer/returnOrder.action?orderId=${order.id}" onclick="return confirm('确定要退货吗？')">退货</a></c:if>
                                          <c:if test="${order.orderFormStatus==3 }">
                                          	<a href="" data-toggle="modal" data-target="#appraisalBlock_${order.id}">评价</a>
                                          	<div class="modal fade" id="appraisalBlock_${order.id}" tabindex="-1" role="dialog" aria-hidden="true">
										    <div class="modal-dialog">
										      <div class="modal-content">
										        <div class="modal-header">
										          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
										          <h4 class="modal-title">商品评价</h4>
										        </div>
										        <div class="modal-body">
										          	<form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/customer/appraisal.action" method="post">
											            	<input type="hidden" name="orderId" value="${order.id }">
											            	<div class="panel-group" id="commodity" role="tablist" aria-multiselectable="true">
											            		<c:forEach items="${order.orderList }" var="commodity">
										                          <div class="panel panel-default">
										                              <div class="panel-heading" role="tab" id="headingComm_${commodity.commodity.id }">
										                                  <h4 class="panel-title">
										                                      <a data-toggle="collapse" data-parent="#commodity" href="#collapseComm_${commodity.commodity.id }" aria-expanded="true" aria-controls="collapseComm_${commodity.commodity.id }">
										                                          商品名称：${commodity.commodity.commodityName }
										                                      </a>
										                                  </h4>
										                              </div>
										                              <div id="collapseComm_${commodity.commodity.id }" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingComm_${commodity.commodity.id }">
										                                  <div class="panel-body">
										                                      <input type="hidden" name="commodityId" value="${commodity.commodity.id }">
										                                      <div class="form-group">
										                                          <label for="content${commodity.commodity.id }" class="col-sm-2 control-label">评价内容</label>
										                                          <div class="col-sm-10">
										                                              <textarea id="content${commodity.commodity.id }" name="content" class="form-control"></textarea>
										                                          </div>
										                                      </div>
										                                  </div>
										                              </div>
										                          </div>
										                          </c:forEach>
										                      </div>

					                                  	<div class="form-group text-center">
					                                  		<button type="submit" class="btn btn-default">评价</button>
					                                  	</div>
										        	</form>
										          </div>
										          <div class="modal-footer">
										            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
										          </div>
										      </div>
										    </div>
										  </div>
                                          </c:if>
                                      </h5>
                                  </div>
                              </div>
                          </div>
                        </c:forEach>
                      </div>
                  </div>
                  <div class="col-md-12 col-md-offset-7">
                  <nav>
                      <ul class="pagination">
                      	  <c:forEach begin="${orderFormPageBean.beginPageIndex }" end="${orderFormPageBean.endPageIndex }" var="num">
                      	  	  <c:if test="${num==orderFormPageBean.beginPageIndex }"><li><a href="${pageContext.request.contextPath}/customer/showOrder.action?pageNum=${orderFormPageBean.beginPageIndex }&orderStatus=${orderStatus}">&laquo;</a></li></c:if>
	                          <c:if test="${num==orderFormPageBean.currentPage}"><li class="active"><a href="">${num }</a></li></c:if>
	                          <c:if test="${num!=orderFormPageBean.currentPage}"><li><a href="${pageContext.request.contextPath}/customer/showOrder.action?pageNum=${num }&orderStatus=${orderStatus}">${num }</a></li></c:if>
	                          <c:if test="${num==orderFormPageBean.endPageIndex }"><li><a href="${pageContext.request.contextPath}/customer/showOrder.action?pageNum=${orderFormPageBean.endPageIndex }&orderStatus=${orderStatus}">&raquo;</a></li></c:if>
                          </c:forEach>
                      </ul>
                  </nav>
              </div>

      </div>
    </div>
</div>
</div>
</div>


  <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col-xs-12"><p class="text-center">COPYRIGHT &copy; 2014 LUOJIE. ALL RIGHTS RESERVED.</p></div>
      </div>
    </div>
  </footer>

  <!-- 外部JS脚本文件 -->
  <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</body>

</html>